<template>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
        <el-button type="primary" size="default" class="el-icon-plus" @click="addTm" v-if="$hasBP('btn.Trademark.add')">添加</el-button>
        <el-table border style="width: 100%;margin:20px 0" :data="trademarkList">
            <el-table-column label="序号" width="180" type="index" align="center">
            </el-table-column>
            <el-table-column label="品牌名称" width="180" prop="tmName" align="center">
            </el-table-column>
            <el-table-column label="品牌LOGO" align="center">
                <template slot-scope="scope">
                    <img :src="scope.row.logoUrl" style="width:100px;height:80px">
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="{row, $index}"> 
                    <el-button type="warning" class="el-icon-edit-outline" size="small" @click="updateTm(row)" style="margin-right:10px" v-if="$hasBP('btn.Trademark.update')"></el-button>
                    <el-popconfirm :title="`确定要删除${row.tmName}吗？`" width="250px" :icon="Delete" @confirm="remove(row)">
                        <el-button type="danger" size="small"  slot="reference" class="el-icon-delete" v-if="$hasBP('btn.Trademark.remove')"></el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页器 -->
        <el-pagination background layout="prev, pager, next, jumper, ->, sizes,total" :total="total"
            :page-sizes="[3,5,7]" :page-size="limit" @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page.sync="page">
        </el-pagination>


        <!-- 添加弹窗 -->
        <el-dialog :title="form.id ? '修改品牌' : '添加品牌'" :visible.sync="show">
            <el-form :model="form" style="width: 80%" label-width="100px">
                <el-form-item label="品牌名称" prop="tmName">
                    <el-input v-model="form.tmName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="品牌LOGO" prop="logoUrl">
                    <el-upload class="avatar-uploader" :action="`${$BASE_API}/admin/product/fileUpload`" :on-success="handleAvatarSuccess" :show-file-list="false">
                        <img v-if="form.logoUrl" :src="form.logoUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="show = false">取 消</el-button>
                <el-button type="primary" @click="addOrUpdate">确 定</el-button>
            </div>
        </el-dialog>

    </el-card>



</template>

<script>

export default {
    name: 'Trademark',
    data() {
        return {
            //所有用到的数据都要保存在data里
            trademarkList: [],
            total: 0,
            page: 0,
            limit: 5,

            show: false,   //控制弹窗出现/隐藏的标记

            form: {   //收集表单中数据
                tmName: '',
                logoUrl: ''
            },

        }
    },
    mounted() {
        //获取品牌分页数据
        this.getTrademarkList()
    },
    methods: {
        //获取品牌分页数据的回调
        async getTrademarkList(page = 1) {
            let result = await this.$API.trademark.getList(page, this.limit)
            let { records, total } = result.data
            this.total = total
            this.trademarkList = records
        },

        //分页器
        //更改条数
        handleSizeChange(limit){
            this.limit = limit
            this.getTrademarkList(1)
        },
        //更改页码
        async handleCurrentChange(page){
            this.page = page
            let result = await this.$API.trademark.getList(page, this.limit)
            let { records, total } = result.data
            this.total = total
            this.trademarkList = records
        },

        //添加/修改的回调
        async addOrUpdate() {
            const trademark = this.form
            if (trademark.id) { // 更新
                let result = await this.$API.trademark.update(trademark)
            } else { // 添加
                let result = await this.$API.trademark.add(trademark)
            }
            this.show = false
            this.getTrademarkList(trademark.id ? this.page : 1)
        },

        //删除的回调
       async remove(trademark){
            let result = await this.$API.trademark.remove(trademark.id)
            this.$message({
            type: 'success',
            message: '删除成功!'
          })
          //重新获取列表(当前页还有数据显示当前页 没有显示上一页)
          if(this.trademarkList.length==1){
            this.getTrademarkList(this.page-1)
          }
          this.getTrademarkList(this.page)

        },

        //显示添加页面
        addTm() {
            //清除/重置form中的数据
            this.form = {
                tmName: '',
                logoUrl: '',
            }
            this.show = true
        },

        //显示修改页面
        updateTm(trademark) {
            this.form = {
          ...trademark
        }
            this.show = true
        },


        //图片上传成功的回调
        handleAvatarSuccess(res,file){
            this.form.logoUrl = res.data
        }





    },

}
</script>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>